<!DOCTYPE html>
<html>

<head lang="en">
    <title>签到</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="/css/css/public.css">
    <link rel="stylesheet" href="/css/css/signin.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>

    <script>
        $(function () {
            //获取当前作用域中的用户
            var user = JSON.parse(sessionStorage.getItem("user"));

            //当天签到就显示已签到
            function state() {
                $.get('/signs/state/' + user.id, function (data) {
                    if (data == 1) {
                        $("#sign-txt").text("已签到");
                    }
                });
            }


            function getsigns() {
                $.get('/signs/' + user.id, function (data) {
                    $('.sign').renderValues(data[0]);


                    $('#sign-count').text(data[0].signcount);
                    state();

                });
            }

            getsigns();

            $("#idCalendarPre").click(function () {
                getsigns();
            });

            $("#idCalendarNext").click(function () {
                getsigns();
            });

            //连续签到的次数
            var sign;

            $("#signIn").click(function () {
                //判断今天是否签到
                if ($('#sign-txt').text() == "签到") {

                    $.post("/signs", {userId: user.id}, function (data) {
                        if (data.success) {

                            $(document).dialog({
                                type: 'notice',
                                infoText: '签到成功,+10积分',
                                autoClose: 2000
                            });
                            $("#sign-txt").text("已签到");

                            $.get('/signs/' + user.id, function (data) {
                                $('.sign').renderValues(data[0]);
                                $('#sign-count').text(data[0].signcount);
                                state();
                                sign = $('#sign-count').html();

                                //判断当天签到后连续签到是否满足3次
                                if (sign % 3 == 0) {
                                    $(document).dialog({
                                        titleShow: false,
                                        content: '连续签到三天，+20积分'
                                    });
                                }
                            });
                            window.location.reload();
                        } else {
                            $(document).dialog({
                                titleShow: false,
                                content: data.msg
                            });
                            $("#sign-txt").text("已签到");
                        }
                    })
                } else {
                    $(document).dialog({
                        titleShow: false,
                        content: '今天已经签到了'
                    });
                }
            });
        });
    </script>
</head>
<div class="nav-search">
    <a href="/mine/profiles.html">
        <span><i class="fa fa-angle-left fa-2x"></i></span>
    </a>
</div>

<body>
<div class="top flex flex-align-end flex-pack-center flex-warp">
    <div class="out-1 flex flex-align-center flex-pack-center" id="signIn">
        <div class="out-2 flex flex-align-center flex-pack-center">
            <div class="signBtn sign">
                <strong id="sign-txt">签到</strong>
                <span>连续<em id="sign-count" render-html="signcount"></em>天</span>
            </div>
        </div>
    </div>
</div>
<div class="tips"></div>
<div class="Calendar">
    <div id="toyear" class="flex flex-pack-center">
        <div id="idCalendarPre">&lt;</div>
        <div class="year-month">
            <span id="idCalendarYear"></span>年<span id="idCalendarMonth"></span>月
        </div>
        <div id="idCalendarNext">&gt;</div>
    </div>
    <table border="1px" cellpadding="0" cellspacing="0">
        <thead>
        <tr class="tou">
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
        </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
    </table>
</div>
<script type="text/javascript" src="/js/js/calendar.js"></script>
<script language="JavaScript">

    var isSign = false;
    var myday = new Array(); //已签到的数组
    var user = JSON.parse(sessionStorage.getItem("user"));
    $.get('/signs/' + user.id, function (data) {
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            myday.push('' + (data[i].signTime) / 1000);
        }

        var cale = new Calendar("idCalendar", {
            qdDay: myday,
            onToday: function (o) {
                o.className = "onToday";
            },

            onFinish: function () {
                $$("sign-count").innerHTML = myday.length;//已签到次数
                $$("idCalendarYear").innerHTML = this.Year;//表头年份
                $$("idCalendarMonth").innerHTML = this.Month;
            }
        });
        $$("idCalendarPre").onclick = function () {
            cale.PreMonth();
        };
        $$("idCalendarNext").onclick = function () {
            cale.NextMonth();
        };

        $$("signIn").onclick = function () {
            if (isSign == false) {
                var res = cale.SignIn();
                if (res == '1') {
                    isSign = true;
                }
            }
        }
    })
</script>
</body>
</html>